import React, { Component } from 'react'
import Num from './Num'
import Button from './Button'
import {CountWraper} from './Count.style'


export default class Count extends Component {

  constructor(){
    super();
    this.state={
      num:100
    }
  }

  increment(){
    this.setState({
      num:this.state.num +=1
    })
  }


  decrement(){
    this.setState({
      num:this.state.num -=1
    })
  }

  changeNum(num){
    this.setState({
      num:this.state.num +=num
    })
  }
  
  render() {
    return (
      <CountWraper>
        {/* <Button change={()=>this.decrement()}>-</Button>
        <Num init={this.state.num}></Num>
        <Button change={()=>this.increment()}>+</Button> */}
         <Button bg="blue" change={(n)=>this.changeNum(n)}>-</Button>
        <Num init={this.state.num}></Num>
        <Button bg="green" change={(n)=>this.changeNum(n)}>+</Button>
      </CountWraper>
    )
  }
}
